<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>calendar日历插件-Jquery插件库-林氏智造</title>
		<link href="css/reset.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/ui.css" rel="stylesheet"/>
		<link href="css/shCoreDefault.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.10.0.min.js"></script>
		<script type="text/javascript" src="js/shCore.js"></script>
		<script type="text/javascript" src="js/shBrushCSharp.js"></script>
		<script type="text/javascript">SyntaxHighlighter.all();</script>
		<script type="text/javascript" src="js/lin_calendar.1.0.js"></script>
		<script type="text/javascript">
			$(function(){
				lin_calendar.init({
					count:2,					//显示日历个数
					showBtn: true,				//显示功能按钮
					insertPosition: "#calendar",	//将日历插入到id为copyright元素前, 如果设置此项, 默认插入BODY
					onSelectDay:fnSelectDay,
					orders:["2013-07-03","2013-07-12"]
				});
				lin_calendar.create();
			
				//obj属性,data-week星期几 data-date日期
				function fnSelectDay(obj)
				{
					alert(obj['data-date']+'|'+obj['data-week']);
				}
				$('.show').click(function(){
					lin_calendar.show();
				});
			});
		</script>
	</head>
	<body>
		
		<div class="slidebar">
			<a href="http://www.0773linji.com" title="林氏智造" class="logo">林氏智造</a>
			<div class="slidebar_title">Jquery<span class="ver">插件库</span></div>
            <iframe src="../menu.html" frameborder="0"></iframe>
		</div>
		
		<div class="content">
			
			<div class="caption"><h2>calendar日历插件</h2><span class="file">Define in : lin_calendar.1.0.js</span></div>
			
			<div class="mod_desc">
        			<p>日历插件最主要的就是日历的生成算法，这个插件的算法是我从别人那COPY过来的，所以插件是伪原创；具体的算法你可以研究源代码或者百度日历算法，只要日历生成后就可以任你摆布！呵呵！哈哈！</p>
    			</div>
    			
    			<h3 class="title_lv2">
    				lin_calendar.init(<span>options</span>);
    			</h3>
    			
    			<dl class="deps">
        			<dt>依赖</dt>
        			<dd>JS : jquery-1.10.0.min.js</dd>
        			<dd>CSS : ui.css</dd>
        			<dd>浏览器 : ie7+</dd>
    			</dl>
    			
    			<div class="params_box">
				<h5>参数</h5>
				<ul class="params_list">
					<li>
						<dl>
							<dt>options</dt>
							<dd>Object</dd>
						</dl>
						<div class="params_desc">
							<span class="type required">必需</span>
							<p>多选形式的可配置参数。</p>
						</div>
					</li>
				</ul>
			</div>
			
			<div class="article_box">
        			<p>下表列出了options参数介绍。</p>
    			</div>
    			
    			<table class="props_tb">
        <colgroup>
            <col style="width:130px">
            <col style="width:100px">
            <col style="width:70px">
            <col style="width:370px">
        </colgroup>
        <thead>
            <tr class="even">
                <th>参数</th>
                <th>数据类型</th>
                <th>默认值</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><b class="name">id</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">自动生成</span></td>
                <td class="t_l">
                    <p>日历ID</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">insertPosition</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">body</span></td>
                <td class="t_l">
                    <p>日历插入指定位置</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">showBtn</b></td>
                <td><span class="type">Boole</span></td>
                <td><span class="normal">true</span></td>
                <td class="t_l">
                    <p>是否显示功能按钮</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">holiday</b></td>
                <td><span class="type">Boole</span></td>
                <td><span class="normal">true</span></td>
                <td class="t_l">
                    <p>是否特殊显示节假日</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">count</b></td>
                <td><span class="type">int</span></td>
                <td><span class="normal">1</span></td>
                <td class="t_l">
                    <p>日历显示个数</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">year</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">当前年份</span></td>
                <td class="t_l">
                    <p>指定年份</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">month</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">当前月份</span></td>
                <td class="t_l">
                    <p>指定月份</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">selectDay</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">当日</span></td>
                <td class="t_l">
                    <p>选择的日期</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">onToday</b></td>
                <td><span class="type">Function</span></td>
                <td><span class="normal">''</span></td>
                <td class="t_l">
                    <p>当前回调函数</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">onComplete</b></td>
                <td><span class="type">Function</span></td>
                <td><span class="normal"></span></td>
                <td class="t_l">
                    <p>日历加载完毕回调函数</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">onSelectDay</b></td>
                <td><span class="type">Function</span></td>
                <td><span class="normal">''</span></td>
                <td class="t_l">
                    <p>选择日期回调函数</p>
                    <p><b>obj</b> {data-week星期几,data-date日期}</p>
                </td>
            </tr>
        </tbody>
    </table>


<div class="article_box">
        			<p>下表列出了对象方法。</p>
    			</div>
    			
    			<table class="props_tb">
        <colgroup>
            <col style="width:130px">
            <col style="width:370px">
        </colgroup>
        <thead>
            <tr class="even">
                <th>方法名</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><b class="name">create</b></td>
                <td class="t_l">
                    <p>创建日历并显示日历</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">show</b></td>
                <td class="t_l">
                    <p>显示日历</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">hide</b></td>
                <td class="t_l">
                    <p>隐藏日历</p>
                </td>
            </tr>
        </tbody>
    </table>
    
    
    <div class="example_box">
        <h5>例子一：基本调用</h5>
        <p>CSS</p>
        <div class="code_box">
        		<pre class="brush: csharp;">.lin_calendar{position:relative;float:left;border:1px solid;border-color:#85BEE5 #3485C0 #3485C0 #85BEE5;padding:0 30px 15px;background:#FFF;}
.lin_calendar_container{float:left;margin:10px 10px 0;}
.lin_calendar dl{width:183px;color:#404040;font:12px/22px Tahoma;margin:10px 10px 0;}
.lin_calendar dl,.lin_calendar dt,.lin_calendar dd{text-align:center;margin:0;padding:0;}
.lin_calendar dt{float:left;width:25px;height:22px;margin-left:1px;}
.lin_calendar dt.date{width:100%;font-weight:700;border-bottom:1px solid #E4E4E4;margin:0;}
.lin_calendar dd{clear:both;width:183px;height:139px;font-weight:700;background:url(veryhuo_rili_bg.png) no-repeat;}
.lin_calendar dd a,.lin_calendar dd a span{float:left;width:25px;height:22px;color:#404040;overflow:hidden;text-decoration:none;background-image:url(special-day.png);background-position:-999px -999px;background-repeat:no-repeat;margin:1px 0 0 1px;outline:none;}
.lin_calendar dd a:hover,.lin_calendar dd a.selected{color:#FFF;background-color:#5792DC;}
.lin_calendar dd a.disabled,.lin_calendar dd a.disabled:hover{color:#DCDCDC;cursor:default;background-color:transparent;}
.lin_calendar dd a span{display:block;width:25px;height:22px;margin:0;cursor:pointer;}
.lin_calendar_prev,.lin_calendar_next,.lin_calendar_close{position:absolute;cursor:pointer;overflow:hidden;text-indent:-9999px;background:url(veryhuo_rili_ico.png) no-repeat;}
.lin_calendar_prev,.lin_calendar_next{top:50%;width:20px;height:38px;margin-top:-19px;}
.lin_calendar_prev{left:10px;background-position:0 -25px;}
.lin_calendar_next{right:10px;background-position:-20px -25px;}
.lin_calendar_close{top:8px;right:8px;width:17px;height:17px;background-position:-40px -25px;}
.lin_calendar dd a.yuandan,
.lin_calendar dd a.chuxi,
.lin_calendar dd a.chunjie,
.lin_calendar dd a.yuanxiao,
.lin_calendar dd a.qingming,
.lin_calendar dd a.wuyi,
.lin_calendar dd a.duanwu,
.lin_calendar dd a.zhongqiu,
.lin_calendar dd a.guoqing,
.lin_calendar dd a.today,
.lin_calendar dd a.order
{text-indent:-999px;}
.lin_calendar dd a.yuandan{background-position:0 0;}
.lin_calendar dd a.chuxi{background-position:0 -30px;}
.lin_calendar dd a.chunjie{background-position:0 -60px;}
.lin_calendar dd a.yuanxiao{background-position:0 -90px;}
.lin_calendar dd a.qingming{background-position:0 -120px;}
.lin_calendar dd a.wuyi{background-position:0 -150px;}
.lin_calendar dd a.duanwu{background-position:0 -180px;}
.lin_calendar dd a.zhongqiu{background-position:0 -210px;}
.lin_calendar dd a.guoqing{background-position:0 -240px;}
.lin_calendar dd a.today{background-position:0 -270px;}
.lin_calendar dd a.order{background-position:0 -300px;}
.lin_calendar dd a.yuandan:hover, .lin_calendar dd a.yuandan .selected{background-position:-31px 0;}
.lin_calendar dd a.chuxi:hover, .lin_calendar dd a.chuxi .selected{background-position:-31px -30px;}
.lin_calendar dd a.chunjie:hover, .lin_calendar dd a.chunjie .selected{background-position:-31px -60px;}
.lin_calendar dd a.yuanxiao:hover, .lin_calendar dd a.yuanxiao .selected{background-position:-31px -90px;}
.lin_calendar dd a.qingming:hover, .lin_calendar dd a.qingming .selected{background-position:-31px -120px;}
.lin_calendar dd a.wuyi:hover, .lin_calendar dd a.wuyi .selected{background-position:-31px -150px;}
.lin_calendar dd a.duanwu:hover, .lin_calendar dd a.duanwu .selected{background-position:-31px -180px;}
.lin_calendar dd a.zhongqiu:hover, .lin_calendar dd a.zhongqiu .selected{background-position:-31px -210px;}
.lin_calendar dd a.guoqing:hover, .lin_calendar dd a.guoqing .selected{background-position:-31px -240px;}
.lin_calendar dd a.today:hover, .lin_calendar dd a.today .selected{background-position:-31px -270px;}
.lin_calendar dd a.order:hover, .lin_calendar dd a.order .selected{background-position:-31px -300px;}</pre>
        </div>
        <p>JS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">lin_calendar.init({
count:2,					//显示日历个数
showBtn: true,				//显示功能按钮
insertPosition: "#calendar",	//将日历插入到id为copyright元素前, 如果设置此项, 默认插入BODY
onSelectDay:fnSelectDay,
orders:["2013-07-03","2013-07-12"]
				});
lin_calendar.create();
			
//obj属性,data-week星期几 data-date日期
function fnSelectDay(obj)
{
alert(obj['data-date']+'|'+obj['data-week']);
}
$('.show').click(function(){
lin_calendar.show();
});</pre>
        </div>
        
        <div class="demo_box">
            
            <a href="javascript:void(0);" class="show">显示日历</a>
            <div id="calendar" style="height: 230px;"></div>  
            
        </div>
        
    </div>
    
    
    <div class="download">
        <h3>立即下载</h3>
        <div class="download_box">
            <a href="#" target="_blank" class="btn_download btn_download_wide">
                <span class="icon_box"><s class="icon_download"></s></span>
                <span class="title">lin_calendar</span>
                <span class="version">version : 1.0</span>
            </a>
        </div>
    </div>
    
    <div class="download">
        <h3>联系我</h3>
        <div class="download_box">
           <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=317365887&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:317365887:53" alt="请注明通过林氏智造发现此QQ" title="请注明通过林氏智造发现此QQ"/></a>
        </div>
    </div>
			
			
		</div>
		
	</body>
</html>
